<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			ul {
				list-style: none;
			}

			a {
				text-decoration: none;
				color: #000;
			}

			body {
				font-family: 楷体;
			}

			.navbg {
				width: 100%;
				background-color: #9bba9a;
			}

			.nav {
				width: 960px;
				margin: 0 auto;
				padding: 10px 0;
			}

			.nav .list {
				display: flex;
				justify-content: space-between;
			}

			.nav .list li {
				display: flex;
				align-items: center;
			}

			.nav .list img {
				width: 30px;
				height: 30px;
				padding: 5px;
			}

			.banner {
				width: 100%;
				background: url(img/bg1.png);
				position: relative;
			}

			.banner img {
				width: 100%;
			}

			.banner .bantext {
				padding: 30px 20px;
				width: 150px;
				position: absolute;
				text-align: center;
				left: 350px;
				bottom: 80px;
			}

			.bantext h2 {
				color: #8d502b;
				font-size: 40px;
				font-weight: normal;
				font-family: 楷体;
				text-align: center;
			}

			.bantext ul {
				display: flex;
				justify-content: center;
			}

			.bantext ul li {
				width: 14px;
				color: #8d502b;
				font-size: 16px;
				font-family: 楷体;
				padding: 5px;
				text-align: center;
			}

			.yuan {
				position: absolute;
				bottom: 10px;
				z-index: 11;
				width: 50px;
				left: 50%;
				transform: translateX(-50%);
			}

			.yuan span {
				display: inline-block;
				width: 10px;
				height: 10px;
				border: #000 1px solid;
				border-radius: 10px;
			}

			.ativit {
				background-color: aquamarine;
			}

			.footer {
				padding: 30px 0;
				width: 100%;
				background-color: #9bba9a;
				text-align: center;
			}

			.centen {
				background: url(img/bg.png);
			}

			.centen .top {
				width: 960px;
				margin: 0 auto;
				padding: 20px 0;
				display: flex;
				justify-content: space-between;
			}

			.centen .top .item1 {
				text-align: center;
				width: 15%;
				height: 120px;
				font-size: 24px;
				letter-spacing: 6px;
				line-height: 40px;
				border: #8D502B 1px solid;
				border-radius: 10px;
			}

			.centen .top .item2 {
				writing-mode: vertical-rl;
				width: 60%;
				padding-top: 40px;
			}

			.centen .top .item3 {
				text-align: center;
				padding-top: 40px;
				width: 15%;
			}

			.centen .top .item3 {
				font-size: 30px;
				font-weight: 500;

			}

			.centen .top .shuo {
				width: 80px;
				height: 80px;
				text-align: center;
				line-height: 80px;
				margin-left: 90px;
				background: url(img/13.png)no-repeat center/cover;
			}

			.top1 {
				width: 50%;
				height: 600px;
				margin: 0 auto;
				background: url(img/14.png)no-repeat center/cover;
			}

			.top1 h1 {
				padding-top: 100px;
				text-align: center;
				font-size: 80px;
			}

			.centen .top2 {
				width: 960px;
				margin: 0 auto;
				padding: 20px 0;
				display: flex;
				justify-content: space-between;
			}

			.centen .top2 .item1 {
				text-align: center;
				width: 150px;
				height: 150px;
				border-radius: 50%;
			}

			.centen .top2 .item2 {
				writing-mode: vertical-rl;
				width: 60%;
				padding-top: 40px;
				letter-spacing: 5px;
			}

			.centen .top2 .item3 {
				text-align: center;
				padding-top: 40px;
				width: 15%;
			}

			.centen .top2 .item3 {
				font-size: 30px;
				font-weight: 500;
			}

			.top3 {
				width: 50%;
				height: 600px;
				margin: 0 auto;
				background: url(img/15.png)no-repeat 0px 50px/80%;
			}

			.top3 h1 {
				padding-top: 100px;
				text-align: center;
				font-size: 80px;
			}
			.top4{
				width: 960px;
				margin: 0 auto;
				display: flex;
				padding: 20px 0;
				justify-content: space-around;
			}
			.top4 li{
				text-align: center;
			}
			.top4 li p{
				text-align: start;
				padding: 10px 0 0 20px;
				writing-mode: vertical-rl;
			}
			.top4 li .gd{
				padding-top: 10px;
				background: url(img/gdbg.png)no-repeat center/cover;
				writing-mode:horizontal-tb;
			}
			.top4 img{
				width: 150px;
			}
		</style>
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<audio autoplay="autoplay" loop="loop">
			<source src="aduio/2.mp3"></source>
		</audio>
		<div class="navbg">
			<div class="nav">
				<ul class="list">
					<li><img src="img/logo.png" style="width: 200px;height: auto;"></li>
					<li><img src="img/tu.png"><a href="index.html">首页</a></li>
					<li><img src="img/tu.png"><a href="two.html">寻茶之旅</a></li>
					<li><img src="img/tu.png"><a href="#">茶语学堂</a></li>
					<li><img src="img/tu.png"><a href="#">我的</a></li>
					<li><img src="img/tu.png"><a href="#">登录/注册</a></li>
				</ul>
			</div>
		</div>
		<div class="banner">
			<img src="img/banner.png" />

		</div>
		<div class="centen">
			<ul class="top">
				<li class="item1">
					<p>茶•文化</p>
					<p>茶•产品</p>
					<p>茶•工艺</p>
				</li>
				<li class="item2">

					茶，灌木或小乔木，嫩枝无毛。<br>
					叶革质，长圆形或椭圆形，<br>
					先端钝或尖锐，基部楔形<br>
					，上面发亮，下面无毛或<br>
					初时有柔毛，边缘有锯齿，<br>
					叶柄无毛。花白色，<br>
					花柄有时稍长；萼片阔<br>
					卵形至圆形，无毛，宿存；<br>
					花瓣阔卵形，基部略连合，<br>
					背面无毛，有时有短柔<br>
					毛；子房密生白毛；花柱无<br>
					毛。蒴果3球形或1-2球形，高<br>
					1.1-1.5厘米，每球有种子1-2粒。<br>
					花期10月至翌年2月。


				</li>
				<li class="item3">
					<p>茶</p>
					<p class="shuo">说</p>
				</li>
			</ul>
			<div class="top1">
				<h1>茶<br><br>道</h1>
			</div>
			<ul class="top2">
				<li class="item1">
					<img src="./img/20.png" width="200px">
				</li>
				<li class="item2">
					<ul>
						茶道<br>
						，就是品赏茶的美感之道。<br>
						亦被视为一种烹茶饮茶的生活<br>
						艺术，一种以茶为媒的生<br>
						活礼仪，一种以茶修身的生<br>
						活方式。它通过沏茶、赏<br>
						茶、闻茶、饮茶、增进友谊<br>
						，美心修德，学习礼法，<br>
						领略传统美德，是很<br>
						有益的一种和美仪式。喝<br>
						茶能静心、静神，有助于<br>
						陶冶情操、去除杂念。<br>
						茶道精神是茶文化的核心。<br>
						茶道被誉为是道家的化身。<br>
					</ul>

				</li>
				<li class="item3">
					<img style="padding-top: 60px;" src="img/chaju.png" width="200px">
				</li>
			</ul>
			<div class="top3">
				<h1>茶<br><br><span style="padding-left: 450px;">品</span></h1>
				<img style="float: right;padding-top: 40px;" src="img/15.png" width="120px">
			</div>
			<ul class="top4">
				<li><img src="img/list1.png"><br>
					<p>白茶<br>
					属微发酵茶，是中国茶农<br>创制的传统名茶。中国六<br>
					大茶类之一。指一种采摘<br>后，不经杀青
					<span class="gd">更多</span></p>
				</li>
				<li><img src="img/list2.png"><br>
					<p>红茶<br>
					红茶在加工过程中发生了<br>
					以茶多酚酶促氧化为中心<br>的化学反应，鲜叶中的化<br>学成分变化较、
					<span class="gd">更多</span></p>
				</li>
				<li><img src="img/list3.png"><br>
					<p>绿茶<br>
					是指采取茶树的新叶或芽<br>，未经发酵，经杀青、整<br>形、烘干等工艺而制作的<br>
					饮品。其制成 <span class="gd">更多</span></p>
				</li>
			</ul>
		</div>
		<div class="footer">
			版权所属© 2020荟茗居
		</div>
	</body>
</html>
